<template>
  <div id="animated-number-demo">
    <input v-model.number="firstNumber" type="number" step="20" /> +
    <input v-model.number="secondNumber" type="number" step="20" /> =
    {{ result }}
    <p>
      <Comp1 :value="firstNumber"></Comp1> +
      <Comp1 :value="secondNumber"></Comp1> =
      <Comp1 :value="result"></Comp1>
    </p>
  </div>
</template>

<script>
import Comp1 from "./Component.vue";
export default {
  data() {
    return {
      firstNumber: 20,
      secondNumber: 40,
    };
  },
  components: {
    Comp1,
  },
  computed: {
    result() {
      return this.firstNumber + this.secondNumber;
    },
  },
};
</script>

<style scoped>
</style>